<!-- MyButton.vue -->
<script setup>
defineProps({
  text: {
    type: String,
    default: '按钮',
  },
  color: {
    type: String,
    default: 'primary',
  },
})

const emit = defineEmits(['click'])

function handleClick() {
  emit('click')
}
</script>
<template>
  <button :class="[`btn-${color}`]" @click="handleClick">
    {{ text }}
  </button>
</template>
<style scoped>
button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.btn-primary {
  background-color: #3498db;
  color: white;
}
.btn-success {
  background-color: #2ecc71;
  color: white;
}
.btn-danger {
  background-color: #e74c3c;
  color: white;
}
</style>
